<template>
    <a-spin :spinning="loading">
        <a-tree
                @select="treeClick"
                @expand="expand"
                v-bind="treeProps"
        >
            <a-icon slot="switcherIcon" type="down"/>
            <a-icon slot="smile" type="home" theme="filled" class="TreeMainNode"/>
            <template slot="second">
                <icon-mdl class="TreeMainNode"></icon-mdl>
            </template>

            <template slot="third">
                <icon-sub-proc class="TreeMainNode"></icon-sub-proc>
            </template>
            <template slot="param">
                <icon-param class="TreeMainNode"></icon-param>
            </template>
            <template slot="custom" slot-scope="{ selected }">
                <a-icon :type="selected ? 'folder-open' : 'folder'" theme="filled"
                        class="TreeChildNode"/>
            </template>
            <template slot="removeIcon" slot-scope="item">
                <a-icon type="minus-circle" @click.stop="leafDelete(item)"></a-icon>
            </template>
            <template slot="activeIcon" slot-scope="item">
                <a-icon v-if="item.validFlg === 'S'" :type="item.selected ? 'folder-open' : 'folder'"
                        theme="filled"
                        class="TreeChildNode"/>
                <icon-tree-auditing v-else-if="item.validFlg === 'Y'" :color="'#efb336'"></icon-tree-auditing>
                <icon-tree-delete v-else :color="'red'"></icon-tree-delete>
            </template>
            <template slot="activeIconProd" slot-scope="item">
                <a-icon v-if="item.validFlg === 'Y'" :type="item.selected ? 'folder-open' : 'folder'"
                        theme="filled"
                        class="TreeChildNode"/>
                <icon-tree-delete v-else :color="'red'"></icon-tree-delete>
            </template>
        </a-tree>
    </a-spin>
</template>

<script>

    import IconMdl from "./icon/IconMdl";
    import IconTreeDelete from "./icon/IconTreeDelete";
    import IconSubProc from "./icon/IconSubProc";
    import IconParam from "./icon/IconParam";
    import {v4 as uuidv4} from 'uuid';
    import IconTreeAuditing from "./icon/IconTreeAuditing";

    export default {
        name: "MTree",
        components: {IconTreeAuditing, IconParam, IconSubProc, IconTreeDelete, IconMdl},
        props: {
            defaultExpandedKeys: {
                type: Array,
                default: () => {
                    return ['0-0']
                }
            },
            loading: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            selectedTreeNodeKey: {
                type: String,
            },
            treeData: {
                type: Array,
                default: () => {
                    return [{
                        title: '根节点',
                        key: '0-0',
                        slots: {
                            icon: 'smile',
                        },
                        children: [],
                    }]
                }
            },
            treeClick: {
                type: Function,
                default: () => {

                }
            },
            loadDataAsync: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            loadData: {
                type: Function,
                default: () => {

                }
            },
            expand: {
                type: Function,
                default: () => {

                }
            },
            leafDelete: {
                type: Function,
                default: () => {

                }
            },
            loadedKeys: {
                type: Array
            }
        },
        computed: {
            treeProps() {
                let props = {
                    showIcon: true,
                    selectedKeys: [this.selectedTreeNodeKey],
                    ...this.$props,
                }
                if (!this.loadDataAsync) {
                    props = {
                        ...props,
                        loadData: undefined,
                    }
                }
                return {...props}
            },
        },
        methods: {
            uuid(){
                return uuidv4()
            }
        }
    }
</script>

<style scoped>

</style>
